<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>确认订单</title>
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/eleme/css/WccCss/vendor.css" />
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/eleme/css/WccCss/eleme_icons.css" />
		<link rel="stylesheet" type="text/css" href="http://localhost:8080/eleme/css/WccCss/确认订单.css" />
	</head>
	<body>
		<div class="addAddress">
		<div style="width: 100%;">
			<div style="background-color: #0089DC;height: 23px;border-bottom: 1px solid #027ECB;padding-left: 60px;">
				<a href="https://www.ele.me/place/wtsmv3myg0r" style="color: white;font-size: 12px;text-decoration: none;"></a>
			</div>
			<div style="width: 100%;height: 96px;background-color: #0089DC;">
				<div style="width: 100%;height: 95px;background-image: url(http://localhost:8080/eleme/resources/WccImg/sadasdasdas.png);">
				</div>
			</div>
		</div>
		<div style="width: 1273px;background-color: #F7F7F7;padding-top: 13px;padding-left: 60px;">
			<div style="width: 400px;min-height:430px;background-color: #FFFFFF;border-top: 1px solid #E0E0E0;margin: 0px;padding: 0px;border-left: 1px solid #E0E0E0;border-right: 1px solid #E0E0E0;float: left;">
				<div style="border-bottom: 1px solid #EEEEEE;margin: 0px;width: 400px;height: 60px;padding: 15px;">
					<p style="font-size: 17px;font-weight:bold;color: #333333;width: 100px;margin: 0px;float: left;">订单详情</p>
					<a href="https://www.ele.me/shop/157236676" style="font-size: 12px;color: #666666;margin-left: 170px;">>返回商家修改</a>
				</div>
				<div style="width: 400px;height: 45px;margin: 0px;padding-top: 10px;padding-left: 30px;font-weight: bold;">
					<p style="color: #999999;font-size: 12px;float: left;margin: 0px;width: 175px;height: 20px;">商品</p>
					<p style="color: #999999;font-size: 12px;float: left;margin: 0px;width: 95px;height: 20px;">份数</p>
					<p style="color: #999999;font-size: 12px;margin: 0px;width: 95px;height: 20px;float: left;">小计(元)</p>
				</div>
				<div style="width: 400px;height: 45px;border-bottom: 1px solid #EEEEEE;margin: 0px;padding-top: 5px;padding-left: 29px;">
				</div>
				<div class="listt">
				<div style="width: 398px;background-color: #FCFAF8;height: 50px;padding-top: 13px;border: 0px;padding-left: 30px;" id="tab">
					<p style="font-size: 12px;margin: 0px;color: #666666;width: 155px;float: left;" >抹茶星冰乐(大杯)</p>
					<button style="width: 25px;height: 25px;background-color: #FFFFFF;border: 1px solid #EEEEEE;float: left;" class="reduce">-</button>
					<input type="text" value="1"  style="width: 35px;height: 25px;background-color: #FFFFFF;float: left;border: 1px solid #EEEEEE;text-align: center;" class="text_box"/>
					<button style="width: 25px;height: 25px;background-color: #FFFFFF;float: left;border: 1px solid #EEEEEE;margin-right: 25px;" class="plus">+</button>
					<p style="color: #666666;font-size: 15px;margin: 0px;float: left;" class="price">￥35.00</p>
				</div>
				</div>
				<div style="width: 398px;height: 40px;background-color: #FFFFFF;padding-left: 30px;padding-top: 3px;">
					<p style="width: 180px;font-size: 12px;color: #666666;float: left;margin-right: 85px;">配送费</p>
					<p style="color: #666666;font-size: 15px;margin: 0px;float: left;" id="exfee">￥4.00</p>
				</div>
				<div style="width: 398;height: 90px;background-color: #FFFFFF;padding-left: 215px;">
					<div style="width: 30px;height: 90px;background-color: #FFFFFF;padding-top: 50px;float: left;">
						<p style="color: #F74342;float: left;font-size: 22px;">￥</p>
					</div>
					<div style="width: 30px;height: 90px;background-color: #FFFFFF;padding-top: 20px;float: left;">
						<p style="color: #F74342;float: left;font-size: 46px;" id="total1">31.00</p>
					</div>
				</div>
			</div>
		</div>
		<div style="width: 800px;height: 870px;background-color: white;border: 1px solid #E0E0E0;position: absolute;left: 480px;top: 142px;">
			<div style="margin: 20px;">
				<p style="font-size: 18px;float: left;margin: 0px;">收货地址</p>
				<a style="color: #0089DC;font-size: 14px;margin-left: 610px;" href="javascript:;" class="addressadd">添加新地址</a>
				<div class="addresswrapper" style="width: 755px;height: 72px;border: 1px solid #0089DC;margin-top: 20px;">
					<div style="width: 0;height: 0;border-bottom: 31px solid #188AE1;border-left: 31px solid transparent;position: relative;left: 722px;top: 40px;">
						<img src="img/payder/gou.png" style="position: relative;left: -17px;top: 9px;" />
					</div>
					<div class="icon-location-line" style="width: 55px;font-size:30px;left:20px;color:#ccc;height: 40px;;position: relative;top: -17px;float: left;"></div>
					<p style="font-size: 13px;color: #333333;margin: 0px;position: relative;top: -18px;left: 10px;">吴超 先生 18913630181</p>
					<p style="font-size: 13px;color: #666666;margin: 0px;position: relative;top: -11px;left: 10px;">江苏警官学院(安德门校区)小行路16号</p>
				</div>
				<div class="hideaddress">
					<!--克隆只要克.addresswrapper就行了-->
					<div class="addresswrapper" style="width: 755px;height: 72px;">
						<div class="icon-location-line" style="width: 55px;font-size:30px;left:20px;color:#ccc;height: 40px;;position: relative;top: 15px;float: left;"></div>
						<p style="font-size: 13px;color: #333333;margin: 0px;position: relative;top: 10px;left: 10px;">吴超 先生 18913630181</p>
						<p style="font-size: 13px;color: #666666;margin: 0px;position: relative;top: 15px;left: 10px;">江苏警官学院(安德门校区)小行路16号</p>
					</div>
					
				</div>
				<a class="showmoreaddress" style="color: #999999;font-size: 13px;float: left; cursor: pointer;">显示更多地址</a>
				<div class="icon-arrow-down"></div>
				<div style="width: 700px;height: 30px;margin-top: 40px;">
					<p style="font-weight: bold;font-size: 18px;color: #333333;float: left;margin-right: 25px;">付款方式</p>
					<p style="font-size: 13px;color: #FF9C00;float: left;position: relative;top: 10px;">推荐使用在线支付，不用找零，优惠更多</p>
				</div>
				<div style="width: 755px;height: 72px;margin-top: 30px;">
					<div style="width: 365px;height: 72px;border: 1px solid #0089DC;margin:0px;float: left;">
						<div style="width: 0;height: 0;border-bottom: 31px solid #188AE1;border-left: 31px solid transparent;position: relative;top: 40px;left: 333px;">
							<img src="http://localhost:8080/eleme/resources/WccImg/gou.png" style="position: relative;top: 9px;left: -17px;" />
						</div>
						<p style="color:#333333;font-size: 13px;margin: 0px;position: relative;top: -18px;left: 15px;">在线支付</p>
						<p style="color:#999999;font-size: 13px;margin: 0px;position: relative;top: -8px;left: 15px;">支持微信，支付宝，QQ钱包及大部分银行卡</p>
					</div>
					
					<div class="ttishi">
						<p style="color:#333333;font-size: 13px;position: relative;top: -60px;left: 15px;">货到付款</p>
						<p style="color:#999999;font-size: 13px;position: relative;top: -60px;left: 15px;">送货上门后再付款</p>
					</div>
				</div>
				<p style="font-weight: bold;font-size: 18px;color: #333333;margin-right: 25px;">选择优惠</p>
				<p style="font-size: 13px;color: #333333;float: left;margin-left: 20px;margin-right: 25px;position: relative;top: 12px;">使用红包</p>
				<p style="font-size: 13px;color: #999999;position: relative;top: 13px;">无可用红包</p>
				<p style="font-size: 13px;color: #333333;float: left;position: relative;left: 7px;top: 30px;">使用优惠券</p>
				<p style="font-size: 13px;color: #999999;float: left;position: relative;left: 32px;top: 30px;">网站不支持</p>
				<p style="font-size: 13px;color: #F84342;position: relative;top: 30px;left: 60px;">(仅手机客户端可用)</p>

				<div style="width: 350px;height: 250px;margin-top: 50px;padding: 0px;">
					<p style="font-weight: bold;font-size: 18px;color: #333333;margin-bottom: 15px;">其他信息</p>
					<div>
						<p style="font-size: 13px;color: #333333;float: left;margin-left: 20px;margin-right: 25px;margin-top: 0px;">配送方式</p>
						<p style="font-size: 13px;color: #333333;float: left;margin-top: 0px;">本订单由</p>
						<p style="font-size: 13px;color: #0089DC;float: left;margin-top: 0px;">[蜂鸟专送]</p>
						<p style="font-size: 13px;color: #333333;">提供配送</p>
					</div>
					<div style="margin-top: 30px;">
						<div style="width: 80px;height: 30px;padding: 0px;position: relative;top: -5px;">
							<p style="font-size: 13px;margin-left: 19px;color: #333333;">送达时间</p>
						</div>
						<div style="width: 132px;height: 38px;border: 1px solid #E0E0E0;padding: 0;margin: 0;position: relative;left: 98px;top: -45px;">
							<a style="font-size: 13px;color: #999999;padding: 0px;float:left;margin-right: 50px;position: relative;top: 10px;margin-left: 8px;">立即送达</a>
							<div class="icon-arrow-down" style="position: relative;top: 9px;"></div>
						</div>
					</div>
					<div style="width: 330px;height: 40px;padding: 0px;position: relative;top: -25px;">
						<div style="width: 80px;height: 30p	x;padding: 0px;position: relative;top: -10px;">
							<p style="font-size: 13px;margin-left: 19px;color: #333333;">发票信息</p>
						</div>
						<div style="font-size: 13px;color: #999999;width: 220px;height: 25px;border: 1px solid #E0E0E0;padding-top: 5px;margin: 0;position: relative;left: 97px;top:-30px;text-align: center;background-color: #EEEEEE;">
							仅在饿了么 APP 中支持开发票哦
						</div>
					</div>
					<div style="width: 330px;height: 40px;padding: 0px;position: relative;top: -25px;">
						<div style="width: 80px;height: 30px;padding: 0px;position: relative;top: -10px;">
							<p style="font-size: 13px;margin-left: 19px;color: #333333;">订单备注</p>
						</div>
						<input style="font-size: 13px;color: #999999;width: 220px;height: 25px;border: 1px solid #E0E0E0;padding-top: 5px;margin: 0;position: relative;left: 97px;top:-45px;padding-left: 5px;" />
					</div>
					<button class="btnn">确认下单</button>
					<div style="width: 183px;height: 62px;border: 1px solid #DDDDDD;margin-left: 500px;">
						<div style="width: 100px;height: 61px;margin-top: 5px;margin-bottom: 0px;margin-right: 0px;margin-left: 20px;float: left;">
							<p style="font-size: 12px;color: #999999;margin: 0px;position: relative;top: 5px;left: 24px;">扫码下载APP
								<p/>
								<p style="font-size: 12px;color: #999999;margin: 0px;position: relative;top: 5px;">APP下单立享优惠</p>
						</div>
						<img src="img/payder/qwert.png" style="margin-top: 13px;" />
						<a style="width: 0;
  								height: 0;
    							border-left: 5px solid transparent;
   								border-right: 5px solid transparent;
   								border-top: 6px solid #999999;
   								position: relative;
   								top: 5px;
   								left: 5px;">
						</a>
					</div>
				</div>
				<div style="width: 183px;height: 165px;border: 1px solid #DDDDDD;position: relative;top: 35px;left: 500px;display: none;">
					<img src="img/payder/22222.png" style="width: 145px;height: 145px;position: relative;top: -30px;left: 18px;" />
				</div>
				<div class="tishii">
						<div class="ts">
							<p class="textt">本店不支持货到付款,该服务暂未上线，敬请期待！</p>
						</div>
						<div class="sanjiaoo"></div>
				</div>
			</div>
		</div>                                                                                                             
		</div>
		</div>
		<div class="addressdialog" style="display: none;">
			<div class="addressdialog-close"></div>
			<div class="addressdialog-header">添加新地址</div>
			<div class="addressdialog-content">
				<div class="addressform">
					<div>
						<div class="addressformfield">
							<label>姓名</label><input placeholder="请输入您的姓名">
							<div class="addressformfield-hint">
								<span></span>
							</div>
						</div>
						<div class="addressformfield sexfield">
							<label>性别</label>
							<div>
								<input id="sexfield-1-male" name="sex" type="radio" value="1"><label for="sexfield-1-male">先生</label>
								<input id="sexfield-1-female" type="radio" name="sex" value="2"><label for="sexfield-1-female">女士</label>
							</div>
							<div class="addressformfield-hint">
								<span></span>
							</div>
						</div>
						<div class="addressformfield addressfield">
							<label>位置</label>
							<img src="img/location.png">
							<input placeholder="请输入小区、大厦或学校">
							<div class="addressformfield-hint">
								<span></span>
							</div>
							<div class="addressform-tip" style="display: none;">
								<p><span>没找到你的地址？</span><a>去地图看看吧！</a></p>
								<p>请尝试只输入小区、大厦或学校看看。</p>
								<div class="arrow"></div>
							</div>
						</div>
						<div class="addressformfield">
							<label>详细地址</label><input placeholder="单元、门牌号">
							<div class="addressformfield-hint">
								<span></span>
							</div>
						</div>
						<div class="addressformfield phonefield">
							<label>手机号</label><input placeholder="请输入您的手机号"><button>添加更多电话</button>
							<div class="addressformfield-hint">
								<span></span>
							</div>
						</div>
						<div class="addressformfield phonebkfield" style="display: none;">
							<label></label><input placeholder="固话、手机短号"><button>删除</button>
							<div class="addressformfield-hint">
								<span></span>
							</div>
						</div>
					</div>
					<div class="addressform-buttons">
						<button>保存</button><button>取消</button>
					</div>
				</div>
			</div>
		</div>
		<script src="http://localhost:8080/eleme/js/lib/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://localhost:8080/eleme/js/WccJs/确认订单.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>